<template>
<div class="index">
  <mt-header fixed title="" style="background: #2C3E50">
    <router-link to="/login" slot="left">
      <mt-button icon="back" style=""></mt-button>
    </router-link>
  </mt-header>
  <div class="register-wrap">

    <h3 style="color:rgb(226, 226, 226)">注册</h3>
    <br>

    <el-form :model="loginForm" :rules="rules" ref="loginForm" class="loginForm">
      <el-form-item prop="account" class="login-item">
        <span class="loginTips el-icon-eleme"></span>
        <el-input @keyup.enter.native="submitForm('loginForm')" class="area" type="text" placeholder="账号" v-model="loginForm.account"></el-input>
      </el-form-item>
      <el-form-item prop="user_name" class="login-item">
        <span class="loginTips el-icon-user"></span>
        <el-input @keyup.enter.native="submitForm('loginForm')" class="area" type="text" placeholder="用户名" v-model="loginForm.user_name"></el-input>
      </el-form-item>
      <el-form-item prop="password" class="login-item">
        <span class="loginTips iconfont icon-yuechi"></span>
        <el-input @keyup.enter.native="submitForm('loginForm')" class="area" type="password" placeholder="密码" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item prop="user_phone" class="login-item">
        <span class="loginTips el-icon-phone"></span>
        <el-input @keyup.enter.native="submitForm('loginForm')" class="area" type="tel" placeholder="联系方式" v-model="loginForm.user_phone"></el-input>
      </el-form-item>
      <el-form-item         prop="seccode"         class="inputbar"       >
                 <span class=" iconfont icon-huixingzhen" style="  font-size:24px;  color: rgb(213, 230, 225);float:left;margin-right:10px;margin-top:0px;margin-left:3%"></span>
        <el-input           class="log-input"           v-model="loginForm.seccode"           placeholder="验证码"           prefix-icon="icon-login_auth"           @keydown.enter.native="submitForm('loginForm')"         >

                  </el-input>
                 <div class="checkCode"  @click="createCode">
          <el-button round>{{ checkCode}} </el-button>
        </div>

      </el-form-item>

      <el-form-item>
        <el-button @click="submitForm('loginForm')" class="submit_btn el-icon-right" style="font-size:50px;" round> </el-button>
      </el-form-item>

    </el-form>
    <div style="margin-top:50px;color:white">
      <router-link to="/login">
        <span>已有账号，马上登录</span>
      </router-link>
    </div>
  </div>
</div>
</template>

<script>
import {
  setLocalStorage
} from '@/utils/localStorage'
export default {
  data() {
    return {
      loginForm: {
        user_name: '',
        password: '',
        account: '',
        user_phone: '',
        seccode: ""
      },
      checkCode: '',
      rules: {
        user_name: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          },
          {
            min: 2,
            max: 10,
            message: '长度在 2 到 10 个字符',
            trigger: 'blur'
          }
        ],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
        account: [{
          required: true,
          message: '请输入账号',
          trigger: 'blur'
        }],
        user_phone: [{
          required: true,
          message: '请输入电话号码',
          trigger: 'blur'
        }],
        seccode: [{
          required: true,
          message: "请输验证码",
          trigger: "blur"
        }]
      }
    }

  },
  methods: {
    showMessage(type, message) {
      this.$message({
        type: type,
        message: message
      });
    },
    submitForm(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          let userinfo = this.loginForm;
          this.$api.user.postregister(userinfo).then(res => {
            if (res.code == -1) {
              this.showMessage("info", res.data.message)
            } else {
              this.$router.push({
                path: '/login'
              })
              this.showMessage("info", res.data.message)
            }
          })
        }
      });
    },
    createCode() {
      let code = "";
      const codeLength = 4; //验证码的长度  
      const random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数  
      for (let i = 0; i < codeLength; i++) { //循环操作  
        let index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）  
        code += random[index]; //根据索引取得随机数加到code上  
      }
      this.checkCode = code; //把code值赋给验证码  
    },
    login() {
      if (this.form.seccode != this.checkCode) {
        this.$message({
          message: "验证码错误，注意大写字母",
          type: "warning"
        });
        this.createCode();
        return false;
      };
      var fd = new FormData();
      fd.append("username", this.form.username);
      fd.append("password", this.form.password);
      loginPost(fd).then(res => {
          console.log(res);
          if (res.code == 200) {
            localStorage.setItem("myToken", res.obj.token);
            localStorage.setItem("username", res.obj.userName);
            this.$message({
              message: "登录成功",
              type: "success"
            });
            this.$router.push("/");
            // this.setUserName(res.obj.userName);
          } else {
            this.$message({
              message: res.content,
              type: "warning"
            });
          }
        })
        .catch(res => {
          console.log(res);
        });

    },
  },
  mounted() {
    this.createCode();
  },
}
</script>

<style scoped>
.index {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../../../public/images/bg3.jpg) no-repeat;
  background-size: 375px 650px;
}

.register-wrap {
  z-index: 0;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  margin-top: 20%;

  width: 250px;
  height: 440px;
  border-radius: 30px 0 30px 30px;
  padding: 25px;
  text-align: center;
  box-shadow: 10px 10px 10px rgb(3, 3, 3);

}

input {
  display: block;
  width: 250px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  margin-bottom: 10px;
  outline: none;
  border: 1px solid;
  padding: 10px;
  box-sizing: border-box;

}

.submit_btn {

  width: 100px;
  height: 50px;
  z-index: 99;
  margin: 0 auto;
  padding-bottom: 13px;
  background: -webkit-gradient(linear, left top, left bottom, color-start(0.05, #599bb3), color-stop(1, #408c99));
  background: -moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
  background: -o-linear-gradient(top, #599bb3 5%, #408c99 100%);
  background: -ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
  background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
  background: -webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99', GradientType=0);
  border: 0px solid #dcdcdc;
  -webkit-border-top-left-radius: 8px;
  -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -moz-box-shadow: 0px 10px 14px -7px #276873;
  -webkit-box-shadow: 0px 10px 14px -7px #276873;
  box-shadow: 0px 10px 14px -7px #276873;
  color: rgb(57, 230, 230);
  font-size: 18px;
  line-height: 25px;
  text-indent: 5px;
  margin-bottom: 5px;

}

span {
  cursor: pointer;
  color: #a39d9d
}

span:hover {
  color: #41b883;
}

select {
  width: 50px;
}

.submit_btn :hover {

  opacity: 0.8;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  background-color: #f5f5f5;
  background: -webkit-gradient(linear, left top, left bottom, color-start(0.05, #408c99), color-stop(1, #599bb3));
  background: -moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
  background: -o-linear-gradient(top, #408c99 5%, #599bb3 100%);
  background: -ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
  background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
  background: -webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3', GradientType=0);
  color: #408c99;

}

.loginTips {
  font-size: 24px;
  color: rgb(213, 230, 225);
}

.loginForm {
  width: 100%;
  height: 320px;
  margin: auto
}

.area {
  margin-left: 5%;
  width: 80%;

}

.checkCode {
  background: #f5f5f5;
  width: 30%;
  float: right;
  color: black;
  border-radius: 30px;
  border: 1px solid rgb(75, 71, 71);
}

.checkCode :active {
  background: #5792ec;
  color: rgb(233, 233, 233);
}

.log-input {
  width: 40%;
  float: left;
}
</style>
